<template>
  <div class="active-list">
    <div class="search">
      <p class="float-left mr-10 mb-10" style="width: 200px">
        <el-input
          v-model="searchParams.zdName"
          placeholder="输入名称"
        ></el-input>
      </p>
      <p class="float-left mr-10 mb-10">
        <el-button type="primary" @click="searchActivity">搜索</el-button>
        <el-button type="primary" @click="resetActivity">重置</el-button>
      </p>
    </div>
    <!--    <div class="my-10">-->
    <!--      <bdButton :handlerBtn="handlerBtn" />-->
    <!--    </div>-->
    <bdTable :tableHeader="tableHeader" :tableData="tableData" class="mb-10" />
    <bd-page
      :pageSize="pages"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></bd-page>
    <addActiveAndEditActive
      ref="activityInfo"
      @update:visible="searchActivity(true)"
    />
    <zhendisheAudit ref="activityAudit" @update:visible="searchActivity" />
  </div>
</template>
<script>
import { queryZhendiList } from '@/api/zhendi'
import addActiveAndEditActive from './addActiveAndEditActive'
import zhendisheAudit from './zhendisheAudit.vue'
export default {
  name: '',
  props: {
    hdType: {
      type: String,
      required: true
    }
  },
  components: {
    addActiveAndEditActive,
    zhendisheAudit
  },
  data () {
    return {
      searchParams: {
        zdName: null
      },
      handlerBtn: [
        {
          id: 1,
          name: '新增活动',
          handler: this.addActivity
        }
      ],
      tableHeader: {
        type: 'selection',
        header: [
          // {
          //   prop: 'hdType',
          //   label: '活动类型',
          //   minWidth: 180,
          //   filter: (row) => {
          //     return this.$partyType[row.hdType]
          //   }
          // },
          {
            prop: 'title',
            label: '阵地名称',
            minWidth: 180
          },
          // {
          //   prop: 'address',
          //   label: '活动地址',
          //   minWidth: 180
          // },
          {
            prop: 'detail',
            label: '阵地用途',
            minWidth: 180
          },
          {
            prop: 'people',
            label: '预约人'
          },
          {
            prop: 'phone',
            label: '预约电话',
            minWidth: 150
          },
          {
            prop: 'cyrs',
            label: '活动人数'
          },
          {
            prop: 'bookingTime',
            label: '预约日期'
          },
          {
            prop: 'timeType',
            label: '预约时段'
          },
          {
            prop: 'status',
            type: 'tag',
            label: '活动状态',
            statusType: (row) => {
              return row.status
                ? row.status === 1
                  ? 'success'
                  : 'danger'
                : 'warning'
            },
            filter: (row) => {
              return row.status
                ? row.status === 1
                  ? '已通过'
                  : '已驳回'
                : '待审核'
            }
          },

          {
            label: '操作',
            type: 'button',
            minWidth: 220,
            btn: [
              {
                id: 1,
                name: '审核',
                handler: this.handleAudit,
                disabled: (row) => {
                  return row.status !== 0
                }
              }
              // {
              //   id: 2,
              //   name: "编辑",
              //   handler: this.handleEdit,
              // },
              // {
              //   id: 3,
              //   name: "删除",
              //   type: "danger",
              //   handler: this.handleDelete,
              // },
            ]
          }
        ]
      },
      // 列表数据
      tableData: [],
      // 分页
      pages: {
        page: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    this.searchActivity()
  },
  methods: {
    async searchActivity (clearPage = false) {
      if (clearPage) {
        this.pages.page = 1
        this.pages.pageSize = 10
      }
      const params = {
        ...this.pages,
        ...this.searchParams
      }
      const { total, list } = await queryZhendiList(params)
      this.total = total
      this.tableData = list
    },
    // 重置
    resetActivity () {
      this.searchParams.zdName = ''
      this.searchActivity(true)
    },
    // 新增
    addActivity () {
      this.$refs.activityInfo.isShow(this.hdType)
    },
    // 审核
    handleAudit (e, row) {
      this.$refs.activityAudit.isShow(row)
    },
    // 修改
    handleEdit (e, row) {
      this.$refs.activityInfo.isShow(row, true)
    },
    // 删除
    handleDelete (e, row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // await deleteActivity({ activityId: row.id })
          this.searchActivity()
        })
        .catch(() => {})
    },
    // 条数
    handleSizeChange (val) {
      this.pages.pageSize = val
      this.searchActivity()
    },
    // 页数
    handleCurrentChange (val) {
      this.pages.page = val
      this.searchActivity()
    }
  }
}
</script>
<style lang="scss" scoped></style>
